<template>
  <div class="ui-calendar-week">
    <div
      class="ui-calendar-week__date"

      :class="getDateClasses(date)"
      :key="index"
      :tabindex="(visible && !isDateDisabled(date)) ? 0 : null"

      @click="selectDate(date)"
      @keydown.enter="selectDate(date)"

      v-for="(date, index) in dates"
    >
      {{ getDayOfMonth(date) }}
    </div>
  </div>
</template>

<script>
import dateUtils from './helpers/date'

export default {
  name: 'ui-calendar-week',

  props: {
    month: Number,
    weekStart: Date,
    minDate: Date,
    maxDate: Date,
    selected: Date,
    dateFilter: Function,
    visible: {
      type: Boolean,
      default: true
    }
  },

  data () {
    return {
      today: new Date()
    }
  },

  computed: {
    dates () {
      return this.buildDays(this.weekStart)
    }
  },

  methods: {
    buildDays (weekStart) {
      const days = [dateUtils.clone(weekStart)]
      let day = dateUtils.clone(weekStart)

      for (let i = 1; i <= 6; i++) {
        day = dateUtils.clone(day)
        day.setDate(day.getDate() + 1)

        days.push(day)
      }

      return days
    },

    getDateClasses (date) {
      return [
        { 'is-today': dateUtils.isSameDay(date, this.today) },
        { 'is-in-other-month': this.isDateInOtherMonth(date) },
        { 'is-selected': this.selected && dateUtils.isSameDay(date, this.selected) },
        { 'is-disabled': this.isDateDisabled(date) }
      ]
    },

    selectDate (date) {
      if (this.isDateDisabled(date)) {
        return
      }

      this.$emit('date-select', date)
    },

    getDayOfMonth (date) {
      return dateUtils.getDayOfMonth(date)
    },

    isDateInOtherMonth (date) {
      return this.month !== date.getMonth()
    },

    isDateDisabled (date) {
      const isDisabled = (this.minDate && dateUtils.isBefore(date, this.minDate)) ||
        (this.maxDate && dateUtils.isAfter(date, this.maxDate))

      if (isDisabled) {
        return true
      }

      return this.dateFilter ? !this.dateFilter(date) : false
    }
  }
}
</script>

<style lang="scss">
@import './styles/imports';

.ui-calendar-week {
  display: flex;
  font-size: rem-calc(14px);
  width: 100%;
}

.ui-calendar-week__date {
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: $ui-calendar-cell-size;
  justify-content: center;
  outline: none;
  text-align: center;
  width: $ui-calendar-cell-size;

  &:hover,
  body[modality="keyboard"] &:focus {
    background-color: rgba(black, 0.1);
  }

  &.is-in-other-month {
    visibility: hidden;
  }

  &.is-today {
    font-weight: bold;
    // color is defined in UiCalendar

    &.is-selected {
      color: white;
    }
  }

  &.is-selected {
    color: white;
    // background color is defined in UiCalendar
  }

  &.is-disabled {
    background-color: transparent;
    cursor: default;
    opacity: 0.4;
  }
}
</style>
